<template>
  <div>
    <button @click="isShow = !isShow">切换显示盒子</button>
    <button @click="isLogin = !isLogin">切换</button>
    <!-- 如果需要频繁切换显示隐藏,推荐使用v-show
    如果不需要频繁切换 推荐使用v-if -->
    <div v-show="isShow" style="background-color: yellow">我用 v-show控制</div>
    <div v-if="isShow" style="background-color: yellowgreen">我用v-if控制</div>
    <hr />

    <h1 v-if="isLogin">尊贵的超级VIP,您好</h1>
    <h1 v-else>您还没登录呢!傻子!</h1>
    <hr />

    <h1 v-if="age >= 60">60以上,广场舞</h1>
    <h1 v-else-if="age >= 30">30以上,打麻将</h1>
    <h1 v-else-if="age >= 20">20以上,蹦迪</h1>
    <h1 v-else-if="age <= 20">20以下,唱跳RAP雇佣者</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //如果默认值是false,v-show的元素
      isShow: false,
      //是否登陆
      isLogin: true,
      age: 60,
    };
  },
  methods: {},
};
</script>

<style>
div {
  width: 200px;
  height: 200px;
}
</style>